<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            /* overflow: hidden; */
        }

        table {
            border-collapse: collapse;
            position: absolute;
            left: 0;
            top: 0;
        }

        button {
            padding: 5px 20px;
            font-size: 30px;
        }

        #map {
            background: #ccc;
            padding: 1px;
            float: left;
            font-weight: bold;
        }

        #map div {
            position: absolute;
        }

        h1 {
            font-size: 200px;
            line-height: 500px;
        }

        .popup {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            justify-content: center;
            align-items: center;
            background: rgba(0, 0, 0, .5);
            display: none;
        }

        .info {
            width: 400px;
            height: 300px;
            border: 1px solid #000;
            border-radius: 50px;
            background: #ccc;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: move;
            position: absolute;
        }

        .info p {
            font-size: 30px;
            line-height: 100px;
        }

        .info button {
            font-size: 20px;
            border-radius: 5px;
            outline: none;
        }
    </style>
</head>

<body>
    <table cellspacing="0" border="1"></table>
    <div id="map"></div>
    <button class="level">简单</button>
    <button class="level">普通</button>
    <button class="level">困难</button>
    <h1>分数:0</h1>
    <div class="popup">
        <div class="info">
            <p>GAME OVER</p>
            <p id="score"></p>
            <button>重新开始</button>
        </div>
    </div>
    <script>
        var length = 40; //每行每列格子数
        var cellSize = 20; //单元格大小
        var speed = 0;
        var score = 0;
        var t;
        var headColor = "#666"; //头部颜色
        var bodyColor = "#999"; //身体颜色
        var foodColor = "#000"; //食物颜色
        var bodyArr = [];
        var table = document.querySelector('table');
        var popup = document.querySelector('.popup');
        var info = document.querySelector('.info');
        var scoreBox = document.querySelector('#score');
        var h1 = document.querySelector('h1');
        var levels = document.querySelectorAll('.level');
        var remake = document.querySelector(".info button");
        var map = document.querySelector("#map");
        map.style.height = length * cellSize + 'px';
        map.style.width = length * cellSize + 'px';
        var head = createDiv(headColor);
        var food = createDiv(foodColor);
        bodyArr.push(head);

        for (let i = 0; i < levels.length; i++) {
            levels[i].addEventListener('click', function () {
                clearInterval(t);
                for (let j = 0; j < levels.length; j++) {
                    levels[j].style.backgroundColor = "#fff";
                }
                levels[i].style.backgroundColor = "#999"
                speed = 300 - 100 * i;
                t = setInterval(move, speed);
            })
        }

        for (let i = 0; i < length; i++) {
            var tr = document.createElement('tr');
            for (let j = 0; j < length; j++) {
                var td = document.createElement('td');
                td.style.height = td.style.width = cellSize + 'px';
                tr.appendChild(td);
            }
            table.appendChild(tr);
        }

        function createDiv(color) {
            var div = document.createElement("div");
            div.style.backgroundColor = color;
            var randX = Math.floor(Math.random() * length) * cellSize;
            var randY = Math.floor(Math.random() * length) * cellSize;
            for (let i = 0; i < bodyArr.length; i++) {
                if (parseInt(bodyArr[i].style.left) == randX && parseInt(bodyArr[i].style.top) == randY) {
                    randX = Math.floor(Math.random() * length) * cellSize;
                    randY = Math.floor(Math.random() * length) * cellSize;
                    i = -1;
                }
            }
            div.style.left = randX + "px";
            div.style.top = randY + "px";
            div.style.width = cellSize + "px";
            div.style.height = cellSize + "px";
            map.appendChild(div);
            return div;
        };
        document.addEventListener("keydown", function (e) {
            if (speed != 0) {
                switch (e.keyCode) {
                    case 37:
                        if (head.direction != 'right') {
                            head.direction = 'left';
                        }
                        break;
                    case 38:
                        if (head.direction != 'down') {
                            head.direction = 'up';
                        }
                        break;
                    case 39:
                        if (head.direction != 'left') {
                            head.direction = 'right';
                        }
                        break;
                    case 40:
                        if (head.direction != 'up') {
                            head.direction = 'down';
                        }
                        break;
                    default:
                        break;
                }
            } else {
                alert('请选择难度！');
            }
        })

        function move() {
            for (let i = bodyArr.length - 1; i > 0; i--) {
                switch (bodyArr[i].direction) {
                    case 'left':
                        bodyArr[i].style.left = parseInt(bodyArr[i].style.left) - cellSize + "px";
                        break;
                    case 'right':
                        bodyArr[i].style.left = parseInt(bodyArr[i].style.left) + cellSize + "px";
                        break;
                    case 'up':
                        bodyArr[i].style.top = parseInt(bodyArr[i].style.top) - cellSize + "px";
                        break;
                    case 'down':
                        bodyArr[i].style.top = parseInt(bodyArr[i].style.top) + cellSize + "px";
                        break;
                    default:
                        break;
                }
                bodyArr[i].direction = bodyArr[i - 1].direction;
            }
            switch (head.direction) {
                case 'left':
                    head.style.left = parseInt(head.style.left) - cellSize + "px";
                    break;
                case 'right':
                    head.style.left = parseInt(head.style.left) + cellSize + "px";
                    break;
                case 'up':
                    head.style.top = parseInt(head.style.top) - cellSize + "px";
                    break;
                case 'down':
                    head.style.top = parseInt(head.style.top) + cellSize + "px";
                    break;
                default:
                    break;
            }

            if (head.style.top == food.style.top && head.style.left == food.style.left) {
                score += 100;
                h1.innerHTML = "分数:" + score;
                var newBody = createDiv(bodyColor);
                var lastBody = bodyArr[bodyArr.length - 1];
                newBody.direction = lastBody.direction;
                switch (lastBody.direction) {
                    case 'left':
                        newBody.style.left = parseInt(lastBody.style.left) + cellSize + "px";
                        newBody.style.top = lastBody.style.top;
                        break;
                    case 'right':
                        newBody.style.left = parseInt(lastBody.style.left) - cellSize + "px";
                        newBody.style.top = lastBody.style.top;
                        break;
                    case 'up':
                        newBody.style.top = parseInt(lastBody.style.top) + cellSize + "px";
                        newBody.style.left = lastBody.style.left;
                        break;
                    case 'down':
                        newBody.style.top = parseInt(lastBody.style.top) - cellSize + "px";
                        newBody.style.left = lastBody.style.left;
                        break;
                    default:
                        break;
                }
                bodyArr.push(newBody);
                map.removeChild(food);
                food = createDiv("#000");
            }
            if (parseInt(head.style.top) < 0 || parseInt(head.style.top) >= length * cellSize || parseInt(head.style
                    .left) < 0 || parseInt(head.style
                    .left) >= length * cellSize) {
                scoreBox.innerHTML = "得分:" + score;
                popup.style.display = "flex";
                clearInterval(t);
            }
            for (let i = 1; i < bodyArr.length; i++) {
                if (head.style.top == bodyArr[i].style.top && head.style.left == bodyArr[i].style.left) {
                    scoreBox.innerHTML = "得分:" + score;
                    popup.style.display = "flex";
                    clearInterval(t);
                }
            }
        }
        remake.addEventListener("click", function () {
            location.reload();
        })
    </script>
</body>

</html>